<template>
    <div class="lay-validat-user">
        <el-dialog v-if="userinfo.selectRoleType==='PERSON'" title="提示" :visible.sync="validatvisible" width="30%" :before-close="closeDialong">
            <!--未认证-->
            <div class="item" v-if="userinfo.realStatus === 'UNCERTIFIED'">
                <div class="img">
                    <img src="../../static/img/validat/weirenzhen.png" alt="">
                </div>
                <div class="user">您好，
                    <span>{{userinfo.username}}</span>
                    <time>未实名认证</time>
                </div>
                <div class="dec" v-if="isType === 'art'">请先通过个人实名认证，再发布文章</div>
                <div class="dec" v-if="isType === 'exp'">请先通过个人实名认证，再申请成为专家</div>
                <div class="btn">
                    <el-button @click="closeDialong">取消</el-button>
                    <el-button type="primary" @click="goAuth('PENSON')">立即前往</el-button>
                </div>
            </div>
            <!--审核驳回-->
            <div class="item" v-if="userinfo.realStatus === 'REAL_STATUS_NOPASS'">
                <div class="img">
                    <img src="" alt="">
                </div>
                <div class="user">您好，
                    <span>{{userinfo.username}}</span>
                    <time class="b">审核驳回</time>
                </div>
                <p>原因：{{userinfo.reason}}</p>
                <div class="dec" v-if="isType === 'art'">请审核通过后申请发布文章</div>
                <div class="dec" v-if="isType === 'exp'">请审核通过后申请成为专家</div>
                <div class="btn">
                    <el-button @click="closeDialong">取消</el-button>
                    <el-button type="primary" @click="goAuth('PENSON')">重新认证</el-button>
                </div>
            </div>
            <!--审核中-->
            <div class="item" v-if="userinfo.realStatus === 'REAL_STATUS_PENDING'">
                <div class="img">
                    <img src="../../static/img/validat/shenhezhong.png" alt="">
                </div>
                <div class="user">您好，
                    <span>{{userinfo.username}}</span>
                    <time class="z">审核中</time>
                </div>
                <p v-if="isType === ''">请稍等~</p>
                <div class="dec" v-if="isType === 'art'">请审核通过后申请发布文章</div>
                <div class="dec" v-if="isType === 'exp'">请审核通过后申请成为专家</div>
                <div class="btn">
                    <el-button type="primary" @click="closeDialong">确定</el-button>
                </div>
            </div>
        </el-dialog>
        <el-dialog v-else title="提示" :visible.sync="validatvisible" width="30%" :before-close="closeDialong">
            <!--未认证-->
            <div class="item" v-if="userinfo.ciipEnterpriseCertStatus==='NOTCERTED'">
                <div class="img">
                    <img src="../../static/img/validat/weirenzhen.png" alt="">
                </div>
                <div class="user">您好，
                    <span>{{userinfo.username}}</span>
                    <time>企业未认证</time>
                </div>
                <div class="btn">
                    <el-button @click="closeDialong">取消</el-button>
                    <el-button type="primary" @click="goAuth('ENTERPRISE')">立即前往</el-button>
                </div>
            </div>
            <!--审核驳回-->
            <div class="item" v-if="userinfo.ciipEnterpriseCertStatus==='NOPASS'">
                <div class="img">
                    <img src="" alt="">
                </div>
                <div class="user">您好，
                    <span>{{userinfo.username}}</span>
                    <time class="b">审核驳回</time>
                </div>
                <p>原因：{{userinfo.enterpriseInfo.reason}}</p>
                <div class="btn">
                    <el-button @click="closeDialong">取消</el-button>
                    <el-button type="primary" @click="goAuth('ENTERPRISE')">重新认证</el-button>
                </div>
            </div>
            <!--审核中-->
            <div class="item" v-if="userinfo.ciipEnterpriseCertStatus==='PENDING'">
                <div class="img">
                    <img src="../../static/img/validat/shenhezhong.png" alt="">
                </div>
                <div class="user">您好，
                    <span>{{userinfo.username}}</span>
                    <time class="z">审核中</time>
                </div>
                <p v-if="isType === ''">请稍等~</p>
                <div class="btn">
                    <el-button type="primary" @click="closeDialong">确定</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import {
    Vue,
    Watch,
    Prop,
    Component
} from 'nuxt-property-decorator'
import {
    State
} from 'vuex-class'
import {ciipWebUrl} from '../../../config/server.url.conf'
@Component({
    name: 'test',
    components: {}
})
export default class ValidatUser extends Vue {
    validatvisible: boolean = false
    ciipWebUrl: string = ciipWebUrl
    @Prop() isType !: string
    @State userinfo: any
    @Prop({
        default: false,
        type: Boolean
    }) isFlag !: Boolean
    @Watch('isFlag', {immediate: true})
    isFlagFn (bol: any) {
        if (bol) {
            this.validatvisible = bol
        }
    }
    goAuth (val:string) {
        if (val === 'PENSON') {
            window.open(ciipWebUrl + '/account/safe')
        } else if (val === 'ENTERPRISE') {
            window.open(ciipWebUrl + '/account/authentication')
        }
    }
    closeDialong () {
        this.validatvisible = false
        this.$emit('callBackClose', this.validatvisible)
    }
}
</script>

<style lang="scss" scoped>
    .lay-validat-user{
        .item{
            margin: 0 auto;
            width: 400px;
            .img{
                text-align: center;
            }

            .user{
                padding: 15px 0;
                time{
                    color: #f8b546;
                }
                .b{
                    color: #ff5a5a;
                }
                .z{
                    color: #61c0aa;
                }
            }

            .dec{
                color: #333;
            }

            p{
                padding-bottom: 15px;
            }

            .btn{
                padding: 20px 0;
                text-align: center;
            }
        }
    }
</style>
